<template>
  <div class="newsDetails">
    <!-- 头部 -->
    <van-nav-bar
      style="background-color:#f2f2f2"
      :title="title"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <p class="info" v-html="details"></p>
    <!-- 数据为空 -->
    <van-empty v-if="details === ''" description="暂时没有数据" />
  </div>
</template>
<script>
import SERVE from "@/axios/index";
export default {
  name: "newsDetails",
  data() {
    return {
      title: "",
      details: "",
    };
  },
  mounted() {
    this.$toast.loading({
      mask: true,
      duration: 0,
      message: "加载中...",
    });
    this.getNewsDetails();
  },
  methods: {
    getNewsDetails() {
      SERVE.getNewsDetails({
        params: {
          cs_xxid: this.$route.query.itemId,
        },
      })
        .then((res) => {
          this.$toast.clear();
          this.title = res.data.biaoti;
          this.details = res.data.neirong;
          // 获取更新后的 DOM中的img
          this.$nextTick(() => {
            let imgs = document.getElementsByTagName("img");
            if (imgs.length === 0) return;
            for (let item of imgs) {
              item.style.width = "100%";
            }
          });
        })
        .catch((err) => {
          console.log("err", err);
          this.$toast.clear();
        });
    },
    onClickLeft() {
      this.$router.push({
        path: "/news",
        query: {id: this.$route.query.id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.newsDetails {
  .info {
    padding: 15px;
    box-sizing: border-box;
  }
}
</style>
